<template>
  <div class="home">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑 -->
    <!-- 卡片区 -->
    <el-card class="mt16">
      <!-- 添加按钮 -->
      <el-button
        type="primary"
        style="margin-left: 15px"
        @click="dialogFormVisible = true"
        >添加用户</el-button
      >
      <!-- 添加按钮 -->
      <!-- 表格 -->
      <el-table :data="user" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.children.length > 0">
                <!-- 渲染第一层数据 -->
                <el-row v-for="item in scope.row.children" :key="item.id">
                  <el-col :span="5">
                    <el-tag
                      type="primary"
                      effect="dark"
                      closable
                      @close="del1(scope.row.id, item.id, scope.row)"
                    >
                      {{ item.authName }}
                    </el-tag>
                  </el-col>
                  <el-col :span="19">
                    <rl-row v-for="item1 in item.children" :key="item1.id">
                      <el-col :span="5">
                        <el-tag
                          type="success"
                          effect="dark"
                          closable
                          @close="del2(scope.row.id, item1.id, scope.row)"
                        >
                          {{ item1.authName }}
                        </el-tag>
                      </el-col>
                      <el-col :span="19">
                        <el-tag
                          type="warning"
                          effect="dark"
                          closable
                          v-for="item2 in item1.children"
                          :key="item2.id"
                          @close="del3(scope.row.id, item2.id, scope.row)"
                        >
                          {{ item2.authName }}
                        </el-tag>
                      </el-col>
                    </rl-row>
                  </el-col>
                </el-row>
              </div>
              <div v-else style="padding: 10px 20px">暂时还没有分配权限哦</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="商品描述" prop="roleDesc"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="edit(scope.row)"
              type="primary"
              size="small"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="warning"
              size="small"
              icon="el-icon-setting"
              @click="xuroles(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 模态框 -->
      <el-dialog title="添加用户" :visible.sync="dialogFormVisible" @close="qk">
        <el-form
          :model="form"
          :rules="rules"
          ref="add"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="form.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 模态框 -->
      <!-- 编辑的模态框 -->
      <el-dialog
        title="编辑用户"
        :visible.sync="dialogFormVisible1"
        @close="qk"
      >
        <el-form
          :model="form1"
          :rules="rules"
          ref="edadd"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="form1.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="form1.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="xg">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑的模态框 -->
      <!-- 角色分配的框 -->
      <el-dialog
        title="分配权限"
        :visible.sync="dialogFormVisible2"
        @close="close"
      >
        <!-- default-expanded-keys 默认展开tree组成的数组 -->
        <!-- default-checked-keys 已经选中的tree组成的数组 -->
        <el-tree
          ref="shujuAll"
          :data="tree"
          node-key="id"
          :props="defaultProps"
          default-expand-all
          :default-checked-keys="checkAlltree"
          show-checkbox
        >
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="fpqx">提交</el-button>
        </div>
      </el-dialog>
      <!-- 角色分配的框 -->
    </el-card>
  </div>
</template>

<script>
import { userroles } from '@/http/api.js'
import { addroles } from '@/http/api.js'
import { edroles } from '@/http/api.js'
import { delroles } from '@/http/api.js'
export default {
  data() {
    return {
      dialogFormVisible: false, //添加弹出框的变量
      dialogFormVisible1: false, //修改弹出框的变量
      dialogFormVisible2: false, //权限弹出框的变量
      user: [], //请求的数据
      form: {
        roleDesc: '',
        roleName: ''
      },
      form1: {
        roleDesc: '',
        roleName: '',
        id: 0
      },
      rules: {
        roleName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入用户描述', trigger: 'blur' }
        ]
      },
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      checkAlltree: [], //默认选中的tree数组
      jueseid: 0 //角色的id
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    //   请求页面中的数据
    async getlist() {
      const res = await userroles()
      console.log('roles', res)
      this.user = res
    },
    // 添加用户
    add() {
      this.$refs['add'].validate(async (valid) => {
        if (valid) {
          const res = await addroles(this.form)
          console.log('这是添加的角色', res)
          this.dialogFormVisible = false
          this.getlist()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清空输入框
    qk() {
      this.form = {
        roleDesc: '',
        roleName: ''
      }
    },
    // 数据回填
    edit(row) {
      console.log('数据回填', row)
      this.dialogFormVisible1 = true
      this.form1.roleName = row.roleName
      this.form1.roleDesc = row.roleDesc
      this.form1.id = row.id
    },
    // 修改数据
    xg() {
      this.$refs['edadd'].validate(async (valid) => {
        if (valid) {
          const res = await edroles(this.form1)
          console.log('编辑的用户', res)
          this.dialogFormVisible1 = false
          this.getlist()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除用户
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delroles(id)
          console.log('删除的角色', res)
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改角色权限
    async xuroles(row) {
      console.log('角色权限', row)
      this.jueseid = row.id
      console.log('角色id', this.jueseid)
      const res = await this.$API.getrights('tree')
      console.log('roles权限', res)
      this.tree = res
      this.shujuhuitan(row, this.checkAlltree)
      console.log(this.checkAlltree)
      this.dialogFormVisible2 = true
    },
    shujuhuitan(row, checkAlltree) {
      // 如果没有数据的话就添加数据
      if (!row.children) {
        return checkAlltree.push(row.id)
      }
      // 有数据的话 就遍历循环添加最后一项的id  item是下一层的row
      row.children.forEach((item) => {
        this.shujuhuitan(item, checkAlltree)
      })
    },
    // 点击分配权限的确定按钮
    async fpqx() {
      // 全部被选中的那一项
      const quanbu = this.$refs.shujuAll.getCheckedKeys()
      // 半选状态的
      const banxuan = this.$refs.shujuAll.getHalfCheckedKeys()
      console.log('全选的', quanbu, '半选', banxuan)
      // 使用剩余运算符整合到一块
      const zongheshuju = [...quanbu, ...banxuan]
      // 把数组转为字符串
      const zhuanzfc = zongheshuju.join(',')
      // 调用角色授权的接口
      const res = await this.$API.roleshouquan(this.jueseid, zhuanzfc)
      // console.log(res)
      this.dialogFormVisible2 = false
      this.getlist()
    },
    // 关闭事件 把之前数据清空
    close() {
      this.checkAlltree = []
      this.getlist()
    },
    // 删除第一级
    del1(id, rid, row) {
      this.$confirm('此操作将永久删除该数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$API.deljues(id, rid)
          row.children = res
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除第二级
    del2(id, rid, row) {
      this.$confirm('此操作将永久删除该数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$API.deljues(id, rid)
          row.children = res
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除第三级
    del3(id, rid, row) {
      this.$confirm('此操作将永久删除该数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$API.deljues(id, rid)
          row.children = res
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  .el-tag {
    margin: 10px;
  }
}
</style>
